<template>
  <div class="">
	<iw-header></iw-header>
	<!-- vue 中<a>标签的不恰当使用造成难以找到的错误 -->
    <!--面包屑导航-->
	<bread-crumb>&gt;全部课程</bread-crumb>
  
    <!--主体内容-->
    <article class="container">
        <section class="course_tag">
            <span>课程等级：</span><a href="" class="active">{{tpname}}</a>
        </section>
        <section class="course_list">
            <ul>
                <li class="clearfloat" v-for="(item,i) of list" :key="i">
                    <a href="" class="course_img"><img src="img-course/05.png" alt=""/></a>
                    <div class="information">
                        <h2>{{item.maincourse}}</h2>
						<!-- <p>cid:{{item.cid}}</p> -->
                        <p>typeId:{{item.typeId}}</p>
                        <p>讲师：鼻孔超人{{item.cid}}号</p>
                        <p>课时：{{item.cLength}}</p>
                        <p>开课时间：{{item.startTime}}</p>
                        <p>上课地点：{{item.address}}<router-link to="/address">查看各校区地址</router-link></p>
                    </div>
                    <span>{{item.price | currency}}</span>
                    <router-link :to="{path:'course-detail/'+item.cid}" class="course_btn">查看详情</router-link>
                </li>
            </ul>
        </section>
        <!-- 分页导航-->
        <div class="pages">
            <button :disabled="dis1" @click="dochange(-1)">上一页</button>
		    <button  :class="pageNum==i?'cur':'default'"  v-for="i of pageCount" :key="i"  @click="showPage(i)" >{{i}}</button> 
            <button :disabled="dis2" @click="dochange(1)">下一页</button>
        </div>
    </article>
	<iw-footer></iw-footer>
  </div>
</template>

<script>
import Header from '../components/Header.vue';
import Footer from '@/components/Footer.vue';
import BreadCrumb from "../components/Breadcrumb.vue";
export default {
	data:()=>{
		return { 
			// ajax获取课程列表
			list:[],
			
			pageNum:1,//当前页
			pageCount:0,//总共的页数
			type:0, 
			tpname:"全部课程",		
			//pageSize:4//每页的数量
			//动态路由传参
		}
	},
	computed:{
		//获取计算属性课程列表
		dis1:function(){
			return this.pageNum==1;
		},
		dis2:function(){
			return this.pageNum==this.pageCount;
		},
		// query1:function(){
		// 	return this.$router.query.type;
		// }
		//计算属性不能被修改
		// type:function(){
		// 	let type=this.$route.query.type;
		// 	//如果是全部课程，获取到的type值最终为undefined.在数据库查询给type值为0
		// 	if(type==undefined){
		// 		type=0;
		// 	}
		// 	return type;
		// },
		// tpname:function(){
		// 	let tpname=this.$route.query.tpname;
		// 	if(!tpname){
		// 		tpname="全部课程"
		// 	}
		// 	return tpname;
		// }
			
		
	},
	mounted(){
		this.type=this.$route.query.type;
		//如果是全部课程，获取到的type值最终为undefined.在数据库查询给type值为0
		if(this.type==undefined){
			this.type=0;
		}
		// console.log("挂载完毕之后",this.type)
		this.getlist(1,this.type);
		this.tpname=this.$route.query.tpname;
		if(this.tpname==undefined){
			this.tpname="全部课程"
		}
		 // console.log("生命周期mounted一次，打印type和tpname"+this.type+this.tpname);
	},
	//以下步骤只是试图获取url中的query参数，但是其实直接用 this.$route.query就可以了
	// //导航离开该组件的对应路由时调用 可以访问 this
 //    beforeRouteLeave(to,form,next){
	// 	console.log("导航守卫离开前");
	// 	next();
	// }, 
	// //不可获取this
	// beforeRouteEnter(to,from,next){
	// 	console.log("导航进入时",to);
	// 	// this.type=to.query.type;（X）不可访问this
	// 	// this.tpname=to.query.tpname; （x）
	// 	next();
	// },
	beforeRouteUpdate(to,from,next){
		//从to里获取当前页面的参数
		// console.log("to from ",to ,from);
		this.type=to.query.type;
		// 如果tpname是有值的
		//如果未获取到，将type改为0
		if(!this.type){
			this.type=0;
		}
		let tpname=to.query.tpname;
		 // console.log("从to 中获取的",to.query.type,to.query.tpname);
		if(tpname){
			this.tpname=tpname;
		}else{
			this.tpname="全部课程"
		}
		
		this.getlist(1,this.type);
		next();
	},
	methods:{
		//获取列表
		getlist:function(i,type){
			this.$http.get("course/list?pageNum="+i+"&typeId="+type).then(result=>{
				this.list=result.data.list;
				this.pageCount=result.data.pageCount;
				// console.log("请求的结果是",this.list,this.pageCount);
			}).catch(err=>{
				console.log("获取课程列表出错",err)
				;
			})
		},
		dochange(i){
			// console.log("依旧可以点击")
				this.pageNum+=i;
			// console.log("翻页之后的当前页是",this.pageNum);
			this.getlist(this.pageNum,this.type);
		},
		showPage(i){
			this.pageNum=i;
			// console.log("点击页码后当前页是",this.pageNum);
			this.getlist(this.pageNum,this.type);
		}
		
	},
	components:{
		'iw-header':Header,
		'iw-footer':Footer,
		'bread-crumb':BreadCrumb,
	},
	
}	
</script>

<style scoped>
/*课程列表*/
.course_tag {
    padding: 26px 16px;
    background: #f5f5f5;
    line-height: 26px;
    font-size: 16px;
}
.course_tag span,.course_tag a {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}
.course_tag a {
    padding: 0 16px;
}
.course_tag a.active {
    background: #57bc4c;
    color:#fff;
}
.course_list {
    border-top:2px solid #b2ee86;
    margin-top: 20px;
}
.course_list>ul>li {
    border-bottom:1px dotted #ccc;
    padding: 36px 0;
}
.course_list .course_img {
    float: left;
}
.course_list .course_img>img {
    display: block;
}
.course_list .information {
    float: left;
    margin-left: 60px;
    width: 410px;
}
.course_list .information>h2 {
    font-size: 16px;
    font-weight: lighter;
    margin:4px 0 16px;
}
.course_list .information>p>a {
    color: #f60;
    text-decoration: underline;
}
.course_list .information>p>a:hover {
    color: #f30;
}
.course_list>ul>li>span {
    float: left;
    font-size: 20px;
    color: #f60;
    line-height: 34px;
    margin-top: 54px;
}
.course_list .course_btn {
    float: right;
    width: 120px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    color: #fff;
    background: #77c558;
    font-size: 16px;
    margin-top: 54px;
}
/*分页导航*/
.pages {
    text-align: center;
    margin-top: 50px;
}
.pages button {
    color:#999;
    box-sizing: border-box;
    height: 20px;
    min-width: 20px;
    /* display: inline-block; */
    border:1px solid #ddd;
    margin: 0 2px;
    padding: 0 4px;
    line-height: 18px;
}
.pages button:hover {
    border-color:#a8d885;
}
.pages button.cur {
    border-color:#a8d885;
    background: #a8d885;
    color: #fff;
}
.pages button.default {
    border-color: #ddd;
    color:#ddd;
    cursor: default;
}	
</style>
